<template>
    <div id="title2">
        <div id="background">
        </div>
        <div id="subject-name" class="padding">
            <div>
                <img src="/static/images/subject.jpg" alt="" height="130px">
            </div>
            <div>
                <p class="lab-name">蔡畅实验室 - 脑成像 & 人工智能</p>
                <p class="lab-intr">致力于使用计算机方法揭开大脑的神秘面纱</p>
                <p class="lab-addr">华中师范大学国家教育大数据工程中心</p>
            </div>
        </div>
    </div>
</template>

<script>
export default({
  name: "bigtitle",
})
</script>

<style>
#title2{
    position: relative;
    height:200px;
}
.padding{
    padding-left: 18%;
    padding-right:18%;
}
#background{
    height:200px;
    width:100%;
    background-image: url('/static/images/lab.jpg');
    background-size:cover;
    opacity: 0.3;
}
#subject-name{
    position:absolute;
    height:130px;
    min-width:525px;
    top:50%;
    transform:translateY(-50%);
    display: flex;
    align-items:center;
    opacity: 1;
}
#subject-name > div:last-child{
    margin-left:30px;
    opacity: 1;
}
#subject-name .lab-name{
    font-size:150%;
    font-weight: bold;
    opacity: 1;
}
#subject-name p{
    font-size:120%;
}
#subject-name p.lab-intr{
    margin:8px 0;
}

</style>